<template>
  <div>
    <el-tag
      v-for="(tag,index) in dynamicTags"
      :key="index"
      closable
      :disable-transitions="false"
      @click="editTag(tag,index)"
      @close="handleClose(tag)"
    >
      <span v-if="index!=num">{{tag.Name}}</span>
      <input
        class="custom_input"
        type="text"
        v-model="words"
        v-if="index==num"
        ref="editInput"
        @keyup.enter="handleInput(tag,index)"
        @blur="handleInput(tag,index)"
      >
    </el-tag>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button
      v-else
      class="button-new-tag"
      size="small"
      @click="showInput"
    >{{theme}}</el-button>
  </div>
</template>

<script>
// <!--
// v-model="tagList"  标签内容，tagList为数组或者字符串，字符串每个标签以逗号隔开
// theme="+ New Tag"  新增按钮名称，默认为+ New Tag
// created(){   字符串转数组，定义在父组件
// if(typeof this.tagList =='string'){
// this.tagList = this.tagList.split(',');
// }
// },
// -->
export default {
  name: 'star-input-tag',
  model: {
    prop: 'tagList',
    event: 'input'
  },
  props: {
    tagList: {
      type: Array,
      default() {
        return []
      }
    },
    theme: {
      type: String,
      default: '+ 新标签'
    }

  },
  mounted() {
    console.log()
  },
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      num: -1,
      words: ''
    }
  },
  computed: {
    dynamicTags: {
      get() {
        return this.tagList
      },
      set(tagList) {
        this.$emit('input', tagList)
      }
    }
  },
  methods: {
    // 数组去重
    unique(arr) {
      let x = new Set(arr)
      return [...x]
    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      debugger
      let inputValue = this.inputValue
      if (inputValue) { } else {
        this.inputVisible = false
        return
      }
      let exists = this.dynamicTags.find(item => {
        return item.Name === this.inputValue
      })
      if (exists) {
        alert('tag 已存在')
        return
      } else {
        this.dynamicTags.push({ Id: 5, Name: inputValue })
      }
      // this.dynamicTags = this.unique(this.dynamicTags)
      this.inputVisible = false
      this.inputValue = ''
    },
    editTag(tag, index) {
      this.num = index
      this.$nextTick(_ => {
        this.$refs.editInput[0].focus()
      })
      this.words = tag.Name
    },
    handleInput(tag, index) {
      debugger
      let words = this.words
      if (words) {
        tag.Name = this.words
        this.dynamicTags[index] = tag
      }
      this.dynamicTags = this.unique(this.dynamicTags)
      this.words = ''
      this.num = -1
    }
  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.custom_input {
  width: 80px;
  height: 16px;
  outline: none;
  border: transparent;
  background-color: transparent;
  font-size: 12px;
  color: #b59059;
}
</style>
